<template>

  <div class="h-6" />
  <el-menu
    :default-active="$route.path"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
    @select="handleSelect"
  >
    <el-menu-item index="/elmenttest/eladmin">首页</el-menu-item>
    <el-menu-item  index="/elmenttest/math">分类列表</el-menu-item>
     <el-menu-item index="3">评论中心</el-menu-item>
    <el-menu-item index="4" disabled>个人中心</el-menu-item>
    <el-menu-item index="5">购物车</el-menu-item>
  </el-menu>




  <div>
    <router-view></router-view>
  </div>
</template>



<script lang="ts" setup>
import { ref } from 'vue'



const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const list = [
  {
    id: 1,
    name: '张三',
    age: 18,
    sex: '男',
    url:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
  },
  {
    id: 2,
    name: '张三',
    age: 18,
    sex: '男',
    url:'https://tse2-mm.cn.bing.net/th/id/OIP-C.tGC2-AuHR9hlyEXcJMlvGAHaEK?w=332&h=187&c=7&r=0&o=7&dpr=2&pid=1.7&rm=3'
},{
    id: 3,
    name: '张三',
    age: 18,
    sex: '男',
    url:'https://tse1-mm.cn.bing.net/th/id/OIP-C.86br0muxCCvFMB3wIv9rigHaEK?w=275&h=180&c=7&r=0&o=7&dpr=2&pid=1.7&rm=3'
  },
  {
    id: 4,
    name: '张三',
    age: 18,
    sex: '男',
    url:'https://tse3-mm.cn.bing.net/th/id/OIP-C.PPJXKtFnyjsiqYmCZky3XgHaL5?w=113&h=180&c=7&r=0&o=5&dpr=2&pid=1.7'
},
  {
    id: 5,
    name: '张三',
    age: 18,
    sex: '男',
    url:''
  },{
    id:6,
    url:''
  },
  {
    id:7,
    url:''
  }
]
// 消息加载
const loading = ref(true)
const tableData = [
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-04',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-01',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
]
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/* 消息加载样式 */
body {
   
  margin: 0;
}
.example-showcase .el-loading-mask {
  z-index: 9;
   
}
</style>